<script>
export default {
  name: 'ServerTree',
  props: {
    data: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      containerWidth: '100%'
    }
  },
  created() {
  },
  methods: {
    // 横向节点数 纵向节点数 计算宽度  计算高度  每一层的叶子数
    // 寻找每一层叶子节点数并赋值
    setDataLeafNodeCount(node, index, ct, trIndex) {
      if (node && node.child && node.child.length > 0) {
        let obj = {count: 0}
        this.findNodeCount(node, obj)
        node.leafCount = obj.count
        node.trIndex = trIndex
        node.stepIndex = index
        if (ct.stepCont <= index + 1) {
          ct.stepCont = index + 1
        }
        index++
        node.child.forEach((el, i) => {
          this.setDataLeafNodeCount(el, index, ct, i)
        })
      } else {
        node.trIndex = trIndex
        node.stepIndex = index
        if (ct.stepCont <= index + 1) {
          ct.stepCont = index + 1
        }
        node.leafCount = 0
      }
    },
    findNodeCount(node, obj) {
      if (node.child && node.child.length > 0) {
        node.child.forEach(el => {
          this.findNodeCount(el, obj)
        })
      } else {
        obj.count++
      }
    },
    createTreeEls(opts, data, createElement) {
    }
  },
  render(createElement) {
    let obj = {
      stepCont: 0
    }
    this.setDataLeafNodeCount(this.data[0], 0, obj)
    console.log('data', this.data, 'obj', obj)
    return createElement(
      'div',
      {
        class: ['server-tree'],
        style: {
          width: this.containerWidth
        }
      }
    )
  }
}
</script>
<style lang="scss" scoped>
.server-tree {
  position: relative;
  .across-line {
    width: 30px;
    height: 1px;
    position: absolute;
    background-color: #ccc;
  }
}
.server-tree-item {
  width: 120px;
  height: 80px;
  position: absolute;
  .item-box {
    width: 120px;
    height: 50px;
    border: solid 1px #ccc;
    text-align: center;
  }
  .item-top {
    line-height: 20px;
    font-size: 12px;
    .sub {
      color: #999;
    }
  }
}
</style>
